import React,{PureComponent} from "react"
import {filterTemplate,isNull,handleOSS,filterExp, handleImg} from "../../utils/helper";
import {Carousel,Modal,Flex} from "antd-mobile"
export default class MiTimeline extends PureComponent{
	constructor(props){
		super(props);
		this.state={
			previewVisible:false,
			previewIndex:0,
			imgs:""
		}
	}
	renderText=(item,key,field)=>{
		let title=this.props[field];
		if(isNull(title)){
			return null
		}
		else{
			let {text,text_size=14,text_color,align="left",text_high_color,style}=title||{};
			text=filterExp(text,item);
			if(isNull(text)){
				return null
			}
			else{
				let renderStyle={
					margin:"5px 0",
					fontSize:text_size+"px",
					color:text_color,
					textAlign:align,
					...style
				};
				if(key==0&&!isNull(text_high_color)){
					renderStyle={
						...renderStyle,
						color:text_high_color
					}
				}
				return (
					<div style={renderStyle}>
						{text}
					</div>
				)
			}
		}
	};
	renderImg=(item,key)=>{
		let {img}=this.props;
		if(isNull(img)){
			return null
		}
		else{
			let {text,img_size=60,radius=50}=img||{};
			text=filterExp(text,item);
			img_size=isNull(img_size)?60:img_size;
			if(isNull(text)){
				return null
			}
			else{
				let arr=text.split(",");
				let imgArr=[];
				arr.map((i,k)=>{
					let imgStyle={
						marginRight: "5px",
						marginTop: "5px",
						marginBottom: "5px",
						width:img_size+"px",
						height:img_size+"px",
						borderRadius:radius+"%"
					};
					imgArr.push(
						<img
							key={k}
							src={handleImg(i)+"_120"}
							style={imgStyle}
							onClick={()=>{
								this.showImg(text,k)
							}}/>
					)
				});
				return imgArr;
				
			}
		}
	};
	showImg=(imgs,key)=>{
		if(browser.isInApp){ 
			imgs=imgs.split(",");
			imgs=imgs.map(item=>{
				return handleImg(item);
			})
			Func.callHander(bridge, "gallery", { index: key, imgs, download: true });
		}
		else{
			this.setState({
				imgs,
				previewIndex:key,
				previewVisible:true
			})
		}
	};
	renderLog=()=>{
		let {template,list}=this.props;
		let str="";
		list.map((item,key)=>{
			str+=filterTemplate(template,item)
		});
		console.log(str);
		return str
	};
	renderStatusLine=()=>{
		let {status_line}=this.props;
		if(!isNull(status_line)&&status_line.length>0){
			let {current_status="",formData}=this.props;
			current_status=filterExp(current_status,formData);
			let current=-1;
			status_line.map((item,key)=>{
				if((","+item.status+",").indexOf(","+current_status+",")!=-1){
					current=key
				}
			});
			return (
				<div style={{borderBottom:"1px solid #f7f7f7",padding:"10px 0px"}}>
					<Flex>
						{
							status_line.map((item,key)=>{
								let {text,text_color}=item;
								let imgSrc="image/timeline_4.png";
								if(key<current){
									imgSrc="image/timeline_1.png"
								}
								if(key==current){
									imgSrc="image/timeline_2.png"
								}
								if(key==current+1){
									imgSrc="image/timeline_3.png"
								}
								let lineStyle={
									height:"1px",
									background:"#999",
									position:"absolute",
									top:"12.5px",
									width:"100%"
								};
								if(key==0){
									lineStyle={
										...lineStyle,
										left:"50%",
										width:"50%"
									}
								}
								if(key==status_line.length-1){
									lineStyle={
										...lineStyle,
										width:"50%",
										left:0
									}
								}
								return (
									<Flex.Item style={{marginLeft:0}} key={key}>
										<div style={{position:"relative"}}  data-flex="dir:top cross:center">
											<p style={lineStyle}/>
											<img  src={imgSrc} alt=""  style={{width:"25px",position:"relative",background:"#fff"}}/>
											<p style={{color:text_color,marginTop:"5px",fontSize:'14px'}}>{text}</p>
										</div>
									</Flex.Item>
								)
							})
						}
					</Flex>
				</div>
			)
		}
		else{
			return null;
		}
	};
	renderTimeLine=()=>{
		let {list} = this.props;
		if(!isNull(list)&&list.length>0){
			return (
				<div style={{padding:"15px 15px 0 15px"}}>
					{/*<div style={{color:'red'}} dangerouslySetInnerHTML={{__html:this.renderLog()}} >*/}
					{/*</div>*/}
					{
						list.map((item,key)=>{
							let {name,remark,img}=item;
							return (
								<div data-flex='dir:left box:first' style={{color:key==0?"#ff7f00":""}} key={key}>
									<div style={{background: key!=list.length-1?"#1296db":"",width: "2px",margin: "0 15px",position: "relative"}}>
										<div>
											<img src='image/1.png' style={{position: "absolute",width: "14px",height: "14px",background: "#fff",borderRadius: "50%",left: "-6px"}}/>
										</div>
									</div>
									<div style={{marginBottom:"15px"}}>
										<div>
											{this.renderText(item,key,"title")}
										</div>
										<div>
											{this.renderImg(item,key)}
										</div>
										<div>
											{this.renderText(item,key,"remark")}
										</div>
										<div>
											{this.renderText(item,key,"desc")}
										</div>
									</div>
								</div>
							)
						})
					}
				</div>
			)
		}
		else{
			return null;
		}
	};
	render(){
		let {previewVisible,previewIndex,imgs}=this.state;
		let {list}=this.props;
		return (
			<div style={{fontSize:"16px",background:"#fff"}}>
				{this.renderStatusLine()}
				{this.renderTimeLine()}
				
				<Modal
					visible={previewVisible}
					closable
					className="mi-upload-img-modal"
					onClose={()=>{
						this.setState({
							previewVisible:false
						})
					}}
				>
					<Carousel
						autoplay={false}
						infinite={false}
						selectedIndex={previewIndex}
					>
						{imgs.split(",").map(val => (
							<a
								key={val}
								style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
							>
								<img
									src={`${handleImg(val)}`}
									alt=""
									style={{ width: '100%', verticalAlign: 'center' }}
									onLoad={() => {
										// fire window resize event to change height
										window.dispatchEvent(new Event('resize'));
										this.setState({ imgHeight: 'auto' });
									}}
								/>
							</a>
						))}
					</Carousel>
				</Modal>
			</div>
		)
	}
}